

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>task</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link href="../../lib/layui/css/layui.css" rel="stylesheet" />
  <link href="../../lib/admin/css/admin.css" rel="stylesheet" />
  <link href="../../lib/date/css/date.css" rel="stylesheet" />
  <link href="../../lib/winui/css/winui.css" rel="stylesheet" />
</head>
<body>

  <div class="winui-toolbar">
      <div class="winui-tool">
          <button id="home" class="winui-toolbtn"><i class="fa fa-refresh" aria-hidden="true"></i>Home</button>
          <button id="taskList" class="winui-toolbtn"><i class="fa fa-plus" aria-hidden="true"></i>Task List</button>
      </div>
  </div>

  <div class="layui-fluid">
  
  <div class="layui-row layui-col-space15">
        
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            运行任务
            <span class="layui-badge layui-bg-green layuiadmin-badge">正常</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font" id="running">0</p>
            <p>
              任务总量 
              <span class="layuiadmin-span-color">80%<i class="layui-inline layui-icon layui-icon-flag"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            停止任务
            <span class="layui-badge layui-bg-red layuiadmin-badge">停止</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font"  id="stop">0</p>
            <p>
              任务总量 
              <span class="layuiadmin-span-color">10% <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            成功运行
            <span class="layui-badge layui-bg-green layuiadmin-badge">成功</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">

            <p class="layuiadmin-big-font"  id="success">0</p>
            <p>
              总收入 
              <span class="layuiadmin-span-color">32<i class="layui-inline layui-icon layui-icon-dollar"></i></span>
            </p>
          </div>
        </div>
      </div>
      <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            运行失败
            <span class="layui-badge layui-bg-red layuiadmin-badge">失败</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">

            <p class="layuiadmin-big-font" id="failure">0</p>
            <p>
              最近一个月 
              <span class="layuiadmin-span-color">15% <i class="layui-inline layui-icon layui-icon-user"></i></span>
            </p>
          </div>
        </div>
      </div>
  </div>
  
  
  
  
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md8">
        <div class="layui-row layui-col-space15">



          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">任务概览</div>
              <div class="layui-card-body layadmin-takerates">
                
                 <div class="layui-inline" id="test-n2" ></div>
                
              </div>
            </div>

          </div>
        </div>
      </div>
      
      <div class="layui-col-md4">
        
        <div class="layui-card">
          <div class="layui-card-header">任务节点</div>
          <div class="layui-card-body layadmin-takerates">
          
        <table id="taskInstance" lay-filter="taskInstanceTable" class="layui-table layuiadmin-page-table" lay-skin="line"></table>
        <script type="text/html" id="barMenu">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
            <!-- <div class="layui-progress" lay-showPercent="yes">
              <h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）</h3>
              <div class="layui-progress-bar" lay-percent="65%"></div>
            </div>
            <div class="layui-progress" lay-showPercent="yes">
              <h3>签到率（日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>）</h3>
              <div class="layui-progress-bar" lay-percent="32%"></div>
            </div> -->
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">实时监控</div>
          <div class="layui-card-body layadmin-takerates">
            <div class="layui-progress" lay-showPercent="yes">
              <h3>CPU使用率</h3>
              <div class="layui-progress-bar" lay-percent="58%"></div>
            </div>
            <div class="layui-progress" lay-showPercent="yes">
              <h3>内存占用率</h3>
              <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
            </div>
          </div>
        </div>
        


      </div>
      
    </div>
  </div>
    
    
  	<script src="../../lib/layui/layui.js"></script>
    <script type="text/javascript">
        layui.config({
            base: '../../js/'
        }).use('taskhome');
    </script>
</body>
</html>